html,body{
  background: url(../images/bg.png);
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  -webkit-background-attachment: fixed;
}
.time-line{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
  SimSun, sans-serif;
  list-style: none;
  margin: 0;
  position: relative;
  perspective: 800px;
  padding: 1rem;
  .line{
    position: absolute;
    background: #d7d8d8;
    left: 130px;
    width: 2px;
    top: 0;
    bottom: 0;
    z-index: 0;
  }
  li:not(.line){
    display: flex;
    position: relative;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 30px;
    visibility: hidden;
    &::after{
      content: '';
      position: absolute;
      left: 99px;
      background: #fff;
      border: solid 2px #5fe213;
      width: 20px;
      height: 20px;
      top: 0;
      border-radius: 50%;
      z-index: 10;
    }

    .left{
      width: 90px;
      text-align: right;
      margin: 0;
      transform: scaleY(.9);
      .year{
        font-size: .6rem;
        color: #666;
      }
      .date{
        font-size: 1rem;
        color: #888;
        display: inline-block;
      }
    }
    .right{
      flex: 1;
      margin-left: 50px;
      .title{
        margin: 0;
        padding-bottom: .5rem;
        font-size: .8rem;
        border-bottom: dashed 1px #ccc;
      }
      .desc{
        font-size: .6rem;
        color: #666;
        margin: .5rem 0;
      }
      .pic{
        border: solid 1px #dedede;
        position: relative;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 6px 6px 40px -10px rgba(0,0,0,.5);
        &::after{
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          border: solid 5px #fff;
          border-radius: 5px;
        }
        img{
          width: 100%;
        }
      }

    }
  }
}